Make search controls and results more compact on mobile

Closes #161

Why

On a phone the search, sort and four filter fields came before the first result, and each result had a full-width map. At 375 px the first result started 685 px down, so only its map was on screen.

Two full results now fit on one phone screen.

What changed

Filters toggle (below 640 px)

• The filter fields (shape, country, from, to) are behind a "Filters" button. The button uses aria-expanded and aria-controls, and its arrow flips when open. It's closed by default.
• The active-filter chips and "Clear filters" stay visible while it's closed, so you can still see and remove filters.
• Removing a chip or clearing filters moves focus to the filter's field as before. If the fields are hidden, focus goes to the Filters button instead of getting lost (checkVisibility()).
• The visible "Filters" legend is hidden on small screens, because the button already shows that word. Screen readers still read it as the group's name.
• Desktop is unchanged: no toggle, and the fields are always shown.

Results

• Below 480 px the list doesn't show maps, since each one filled the whole card width. The detail page still has the map.
• Hidden maps never start loading, so phones download no map tiles for the list. That also helps sustainability.
• From 481 to 640 px the small map next to the text stays.
• Results have less spacing on screens up to 640 px.
• Location, date, shape, duration, report text and the detail link are all still in each card.

Files: SearchFilters.tsx, SearchFilters.css, SightingList.css.

Tests

• SearchPage.test.tsx: the Filters button opens and closes the fields, and focus moves to it when the fields are hidden.
• New e2e/mobile-search.spec.ts, at 320 px:
  • the first result is on screen without scrolling, and the list has no maps;
  • the filters can be opened, used and closed with the keyboard, and removing a chip while they're closed moves focus to the button;
  • on a wide screen the fields show and the button doesn't.
• The existing axe checks pass on mobile in light and dark mode, and so does the 320 px no-sideways-scroll check.
• npm run lint, npm run format:check, npm run build, npm run test and npm run test:e2e all pass.

How to check

1. npm run dev, then open DevTools device mode at 320 px and at 375 px.
2. The first result should be on screen without scrolling, with no map in the list.
3. Press Tab to reach "Filters", press Enter, pick a country, then close the filters. The chip should still show, and removing it should put focus back on "Filters".
4. Try 560 px (small map next to the text) and a desktop width (no toggle, same as before).
5. Repeat in dark mode.

Not included

On phones the header still takes about 110 px, because "Report a sighting" wraps under the logo. That's outside this issue and could be its own task under #158.